@use 'sass:math';

@function getShadow($n) {
  $shadow: '#{random(100)}vw #{random(100)}vh #fff';

  @for $i from 2 through $n {
    $shadow: '#{$shadow}, #{random(100)}vw #{random(100)}vh #fff'
  }

  @return unquote($shadow)
}

$size: 1px;
$count: 1000;
$duration: 400s;

@for $i from 1 through 3 {
  $count: floor(math.div($count, 2));
  $duration: floor(math.div($duration, 2));

  .layout#{$i} {
    $size: #{$i}px;
    
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-shadow: getShadow($count);
    animation: move $duration linear infinite;
    
    &::after {
      content: '';
      position: fixed;
      width: $size;
      height: $size;
      background: #fff;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}



@keyframes move {
  100% {
    transform: translateY(-100vh);
  }
}